<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Openlayers雨水分布图Demo | by giscafer</title>
    <link href="./libs/toastr.min.css" rel="stylesheet" />
    <script src="./libs/jquery.min.js"></script>
    <script src="./libs/toastr.min.js"></script>
    <script src="./libs/moment.min.js"></script>
    <script src="./libs/FileSaver.min.js"></script>
    <style>
      .operate {
        padding: 30px;
      }
      .btn {
        margin-left: 50px;
      }
    </style>
  </head>

  <body>
    <h2>雨水分布图Demo——Openlayers</h2>
    <div class="operate">
      <label for="">&nbsp;&nbsp;&nbsp;未来雨水周期：</label>
      <button class="rain-btn" data-hour="24">24小时</button>
      <button class="rain-btn" data-hour="48">48小时</button>
      <button class="rain-btn" data-hour="72">72小时</button>
      <button id="export-png" class="btn btn-default">下载地图</button>
    </div>
    <div id="map" style="width:100%;height: 700px;"></div>
  </body>
</html>
